<template>
      
  <div class="chart-box" :ref="chartId"></div>

</template>

<script>
import * as echarts from 'echarts'
export default {
name:"chartComponent",
props:{
    chartId:{ type:String,required:true}, //图标ID dom节点
    option:{ type:Object,default:()=>{}}, //图标属性
    loading:{type:Boolean,default:false} //LODING状态 
},
data(){
    return{
        myChart:null,
        isFinished:false
    }
},
methods:{
    drawChart(){
        this.myChart.setOption(this.option,true)
    },
    chartResize(){
        this.myChart.resize();
        console.log("重置大小");
    }
},
mounted(){
    if(!this.myChart){
        this.myChart = echarts.init(this.$refs[this.chartId])
    }
    //监听窗口大小的变化
    window.addEventListener('resize', this.chartResize)
    this.drawChart();
    this.myChart.on('finished', () => {
      if (!this.isFinished) {
        console.log('finished')
        this.isFinished = true
        this.myChart.resize()
      }
    })
},
beforeDestroy() {
    //销毁window监听对象
    window.removeEventListener('resize', this.chartResize)
    if (this.myChart) this.myChart.dispose()
    this.myChart = null
  },
   watch: {
    //数据可能是异步的，用watch接听接收
    option: {
      handler(newVal) {
        const options = newVal
        this.drawChart(options)
      },
      deep: true
    }
  }
}
</script>

<style scoped>
.chart-box {
  width: 100%!important;
  height: 100% !important;
}
</style>